<template>
    <div class="comment">
        <div class="c-item" v-for="(item,index) in commentList" :key="index" @click="navTo(item)">
            <div class="c-top">
                    <div class="c-top-img"><img :src=item.imgUrl alt="" :onerror="noImg"></div>
                   <div class="c-top-rig">
                       <div class="c-top-cen">
                            <p class="c-top-cen-cn1">{{item.userName}}</p>
                            <p class="c-top-cen-cn2">{{item.date}}</p>
                        </div>
                        <div class="c-top-zan">
                            <div class="iconfont shanchu">&#xe60c;</div>
                            <p class="c-top-zan-cn2">{{item.zanNum}}</p>
                        </div>
                        
                   </div>
            </div>
            <template v-if = "item.content">
                <div class="c-con">
                    <p class="c-con-cen">{{item.content}}</p>
                    <template v-if="item.reply">
                        <span class="c-con-reply" @click="btnLogin">{{item.reply}}条回复 <em class="iconfont right" >&#xe606;</em> </span>
                    </template>
                    <template v-else>
                        <span class="c-con-reply" @click="reply">回复</span>
                    </template>
                </div>
                <div class="line-p"></div>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name:'commentDetails',
    props:{
        commentList:Array
    },
    data: function(){
        return{
             noImg: 'this.src="/static/img/header.png"',
             showMask:true
        }
    },
    methods:{
        navTo(item){
            console.log(item)
        },
        btnLogin(){
            this.$emit('showReply',this.showMask);
        },
        reply(){

        }
    }
}
</script>
<style lang='less' scoped>
    img,video{
        width: 100%;
        height: 100%;
    }
    .line-h{
        background: #DFE1E3;
        width: 100%;
        height: 1px;
        margin-top: .14rem;
    }
    .line-w{
        width: 100%;
        height: .11rem;
        background: #F5F8FB;
    }
    .comment{
        width: 100%;
        .c-item{
            width:100%;
            .c-top{
                padding: .2rem .3rem 0 .12rem;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                position: relative;
                height: 1.1rem;
               
                    .c-top-img{
                        width: 1.1rem;
                        height: 1.1rem;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .c-top-rig{
                        display: flex;
                        // justify-content: space-between;
                        height: 1.1rem;
                        align-items: center;
                        margin-left: .28rem;
                        // width: 5.6rem;
                        .c-top-cen{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            height: 1.1rem;
                            .c-top-cen-cn1{
                                color: #4E4E4E;
                                font-size: .3rem;
                                font-weight: 600;
                            }
                            .c-top-cen-cn2{
                                color: #7D7D7D;
                                font-size: .28rem;
                            }
                        }
                        .c-top-zan{
                            position: absolute;
                            right: .3rem;
                            display: flex;
                            align-items: flex-end;
                            font-size: .4rem;
                            height: .4rem;
                            color:#6D6D6D;
                            .c-top-zan-cn2{
                                font-size: .28rem;
                                color: #828181;
                                margin-left: .1rem;
                            }
                        }
                    }
                    
                
                .shanchu{
                    color: #6D6D6D;
                    font-size: .38rem;
                    font-weight: 600;
                }
            }
            .c-con{
                margin: 0 .31rem .2rem 1.5rem;
                .c-con-cen{
                    line-height: 1.3;
                    color: #7D7D7D;
                    font-size: .28rem;
                    letter-spacing: 1px;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 3; /** 显示的行数 **/
                    overflow: hidden;  /** 隐藏超出的内容 **/
                    margin-bottom: .2rem;
                }
                .c-con-reply{
                    border: 1px solid #4E4E4E;
                    padding: 2px 5px;
                    color: #4E4E4E;
                    border-radius: 3px;
                }
                .right{
                    font-size: .28rem;
                }
            }
            .line-p{
                background: #DFE1E3;
                height: 1px;
                // margin: 0 .31rem;
            }
        }
    }
</style>